<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.1.1.min.js"></script>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/china.js"></script>
</head>
<body>
  <div id="zhu" style=" width: 700px;height: 350px;border: 1px solid red"></div>
  <div id="line" style="position: absolute; left:750px;top:8px;width: 700px;height: 350px;border: 1px solid blue"></div>
  <div id="map" style="position: absolute;top:400px;width: 700px;height: 350px;border: 1px solid yellow"></div>
  <div id="pie" style="position: absolute;top:400px;left:750px;width: 700px;height: 350px;border: 1px solid black"></div>
</body>
<script>
        //定义文档加载事件
        $(function () {
            //运行函数
            barChart();
            lineChart();
            pieChart();
            mapChart();
        })
        //定义访问柱状图函数的ajx请求
        function barChart() {
            $.ajax({
                url:"/barChart/",//请求地址
                type:"get",//请求方式
                dataType:"json",//响应的数据格式
                success:function (rs) {//响应成功的回调函数
                    //创建生成图表容器的对象
                    var chart = echarts.init(document.getElementById("zhu"));
                    console.log(rs.data);
                    //生成图表js
                    chart.setOption(rs.data);
                }
            })
        }
         function lineChart() {
            $.ajax({
                url:"/lineChart/",//请求地址
                type:"get",//请求方式
                dataType:"json",//响应的数据格式
                success:function (rs) {//响应成功的回调函数
                    //创建生成图表容器的对象
                    var chart = echarts.init(document.getElementById("line"));
                    console.log(rs.data);
                    //生成图表js
                    chart.setOption(rs.data);
                }
            })
        }
         function pieChart() {
            $.ajax({
                url:"/pieChart/",//请求地址
                type:"get",//请求方式
                dataType:"json",//响应的数据格式
                success:function (rs) {//响应成功的回调函数
                    //创建生成图表容器的对象
                    var chart = echarts.init(document.getElementById("pie"));
                    console.log(rs.data);
                    //生成图表js
                    chart.setOption(rs.data);
                }
            })
        }
         function mapChart() {
            $.ajax({
                url:"/mapChart/",//请求地址
                type:"get",//请求方式
                dataType:"json",//响应的数据格式
                success:function (rs) {//响应成功的回调函数
                    //创建生成图表容器的对象
                    var chart = echarts.init(document.getElementById("map"));
                    console.log(rs.data);
                    //生成图表js
                    chart.setOption(rs.data);
                }
            })
        }

</script>
</html>